import { Form, Input, Button, message } from 'antd';
import './index.scss';
import { login } from '@/services/api/user/user';
import { useNavigate } from 'react-router-dom';
export default function Login() {
  interface LoginUser {
    username: string;
    password: string;
    isAuth?: boolean;
  }
  const navagate = useNavigate();
  const onFinish = async (values: LoginUser) => {
    const params: LoginUser = { ...values, isAuth: false };
    const res = await login(params);
    if (res.code === 200) {
      message.success('登录成功');
      localStorage.setItem('access_token', res.data.accessToken);
      localStorage.setItem('refresh_token', res.data.refreshToken);
      localStorage.setItem('userInfo', JSON.stringify(res.data.userInfo));
      navagate({ pathname: '/' });
    } else {
      message.error(res.message);
    }
  };
  return (
    <>
      <div className="main">
        <div id="login-container">
          <h1>会议室预定系统</h1>
          <Form
            labelCol={{ span: 4 }}
            wrapperCol={{ span: 20 }}
            onFinish={onFinish}
            colon={false}
            autoComplete="off"
          >
            <Form.Item
              label="用户名"
              name="username"
              rules={[{ required: true, message: '请输入用户名!' }]}
            >
              <Input />
            </Form.Item>
            <Form.Item
              label="密码"
              name="password"
              rules={[{ required: true, message: '请输入密码!' }]}
            >
              <Input.Password />
            </Form.Item>
            <Form.Item labelCol={{ span: 0 }} wrapperCol={{ span: 24 }}>
              <div className="links">
                <div
                  onClick={() => {
                    navagate({ pathname: '/register' });
                  }}
                >
                  创建账号
                </div>
                <div
                  onClick={() => {
                    navagate('/update-password');
                  }}
                >
                  忘记密码
                </div>
              </div>
            </Form.Item>

            <Form.Item labelCol={{ span: 0 }} wrapperCol={{ span: 24 }}>
              <Button className="btn" type="primary" htmlType="submit">
                登录
              </Button>
            </Form.Item>
          </Form>
        </div>
      </div>
    </>
  );
}
